<template>
  <div class="address-detail">
    <!-- 顶部导航 -->
    <van-nav-bar left-text="添加收货地址" left-arrow @click-left="this.$router.go(-1)" />
    <!-- 编辑表单项 -->
    <van-form @submit="onAddSubmit">
      <van-cell-group inset>
        <van-field
          v-model="this.curAddress.username"
          name="收货人"
          label="收货人"
          placeholder="请填写收货人姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />

        <!-- 国家 -->
        <van-field
          v-model="nationResult"
          is-link
          readonly
          name="nation"
          label="国家"
          placeholder="点击选择城市"
          @click="showNation = true"
        />
        <van-popup v-model:show="showNation" position="bottom">
          <van-picker :columns="nations" @confirm="onNationConfirm" @cancel="showNation = false" />
        </van-popup>

        <!-- 区号 -->
        <van-field
          v-model="this.curAddress.code"
          is-link
          readonly
          name="code"
          label="区号"
          placeholder="点击选择区号"
          @click="showCode = true"
        />
        <van-popup v-model:show="showCode" position="bottom">
          <van-picker :columns="codes" @confirm="onCodeConfirm" @cancel="showCode = false" />
        </van-popup>

        <!-- 手机号码 -->
        <van-field
          v-model="this.curAddress.phone"
          name="手机号码"
          label="手机号码"
          :rules="[{ required: true, message: '请填写收货人手机号码' }]"
        />

        <!-- 省市区 -->
        <van-field
          v-model="this.curAddress.province"
          is-link
          readonly
          label="所在地区"
          placeholder="请选择所在地区"
          @click="showArea = true"
        />
        <van-popup v-model:show="showArea" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="arealist"
            @close="showArea = false"
            @finish="onAreaConfirm"
          />
        </van-popup>

        <!-- 详细地址 -->
        <van-field
          v-model="this.curAddress.detailArea"
          name="详细地址"
          label="详细地址"
          :rules="[{ required: true, message: '详细地址（例如门牌号等）' }]"
        />

        <!-- 默认地址 -->
        <van-field name="设置默认地址" label="设置默认地址">
          <template #input>
            <van-switch v-model="this.curAddress.isDefault" />
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { useCascaderAreaData } from '@vant/area-data'
import { showSuccessToast, showFailToast } from 'vant'
import { addAddress } from '../../api/address.js'
export default {
  props: ['id'],
  data() {
    return {
      // 当前地址列表
      curAddress: {
        userid: JSON.parse(window.sessionStorage.getItem('userInfo')).id,
        // sex: '',
        nation: '中国',
        code: '中国大陆 +86',
        // phone: '',
        province: '',
        detailArea: '',
        // label: '',
        isDefault: false
      },
      // 性别
      sexChecked: '',
      // 选中的地址
      chosenAddressId: 1,
      // 国家选择器
      showNation: false,
      nationResult: '中国',
      // 国家
      nations: [
        { text: '中国', value: '中国' },
        { text: 'Canada', value: 'Canada' },
        { text: 'Malaysia', value: 'Malaysia' },
        { text: 'Singapore', value: 'Singapore' },
        { text: 'Japan', value: 'Japan' },
        { text: 'Commonwealth of Austraila', value: 'Commonwealth of Austraila' },
        { text: 'Italy', value: 'Italy' },
        { text: 'Austria', value: 'Austria' },
        { text: 'Luxembourg', value: 'Luxembourg' },
        { text: 'Russia', value: 'Russia' }
      ],
      // 区号选择器
      showCode: false,
      codes: [],
      // 省市区
      showArea: false,
      // areaValue: '',
      arealist: [],
      cascaderValue: '',
      // 标签
      labelChecked: ''
    }
  },
  created() {
    this.arealist = useCascaderAreaData()
  },
  methods: {
    // 国家选择器
    onNationConfirm(selectedOptions) {
      this.nationResult = selectedOptions.selectedValues[0]
      this.curAddress.nation = selectedOptions.selectedValues[0]
      this.showNation = false
    },
    // 区号选择器
    onCodeConfirm(selectedOptions) {
      this.curAddress.code = selectedOptions.selectedValues[0]
      this.showCode = false
    },
    // 省市区选择器
    onAreaConfirm({ selectedOptions }) {
      this.curAddress.province = selectedOptions.map((option) => option.text).join('/')
      this.showArea = false
    },
    // 添加地址
    async onAddSubmit() {
      console.log(this.curAddress)
      this.curAddress.isDefault = this.curAddress.isDefault ? 1 : 0
      const { data: res } = await addAddress(this.curAddress)
      if (res.code === 1) {
        showSuccessToast('添加地址成功')
        this.$router.go(-1)
      } else {
        showFailToast('添加地址失败')
      }
    }
  },
  watch: {
    // 国家和区号的绑定
    nationResult() {
      if (this.curAddress.nation === '中国') {
        this.codes = [
          { text: '中国大陆 +86', value: '中国大陆 +86' },
          { text: '中国澳门 +853', value: '中国澳门 +853' },
          { text: '中国香港 +852', value: '中国香港 +852' },
          { text: '中国台湾 +886', value: '中国台湾 +886' }
        ]
      } else if (this.curAddress.nation === 'Canada') {
        this.codes = [{ text: 'Canada1', value: 'Canada1' }]
      } else if (this.curAddress.nation === 'Malaysia') {
        this.codes = [{ text: 'Malaysia 60', value: 'Malaysia 60' }]
      } else if (this.curAddress.nation === 'Singapore') {
        this.codes = [{ text: 'Singapore 65', value: 'Singapore 65' }]
      } else {
        this.codes = [{ text: '12345', value: '12345' }]
      }
    },
    // 性别
    sexChecked(newVal) {
      this.curAddress.sex = newVal
    }
  }
}
</script>

<style lang="less" scoped>
.address-detail {
  width: 100%;
  height: 100vh;

  .van-cell-group {
    width: 100%;
    margin: 0;
  }
}
</style>
